/* eslint-disable @typescript-eslint/no-explicit-any */
import { Form, Modal, Input, message } from "antd";
import { useForm } from "antd/es/form/Form";
import { createGroup } from "../../interfaces";
import  './generalModal.module.less'
//只是在这引入通用样式，其他组件的样式居然也跟着变了

interface CreateGroupModalProps {
  isOpen: boolean;
  handleClose: () => void;
}

export interface GroupGroup {
  name: string;
}

const layout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 17 },
};

export function CreateGroupModal(props: CreateGroupModalProps) {
  const [form] = useForm<GroupGroup>();

  const handleOk = async function () {
    await form.validateFields();
    const values = form.getFieldsValue();
    try {
      const res = await createGroup(values.name);
      if (res.status === 200 || res.status === 201) {
        message.success("群聊创建成功");
        form.resetFields();
        props.handleClose();
      }
    } catch (e: any) {
      message.error(e.response?.data.message || "创建失败");
    }
  };

  return (
    <Modal
      title="创建群聊"
      open={props.isOpen}
      onCancel={() => props.handleClose()}
      onOk={handleOk}
      okText={"创建 "}
      cancelText={"取消"}
      style={{ top: 200 }}
    >
      <Form form={form} colon={false} {...layout}>
        <Form.Item
          name="name"
          label="群聊名称"
          rules={[{ message: "请输入群聊名称！" }]}
        >
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
}
